<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />

</head>
<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field  layui-border-blue">
        <legend>搜索区域</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="userId" autocomplete="off" placeholder="请输入用户id" />
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="pId" autocomplete="off" placeholder="请输入商品id" />
                    </div>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i>
                        查找
                    </a>
                    <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="">
                        <i class="layui-icon layui-icon-down"></i>
                        导出
                    </a>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="footprintTable" lay-filter="footprintTable" class="layui-table layui-form" ></table>
    </div>
</div>
<script>
    var $;


    layui.use(['table','form','jquery'],function(){
        var table = layui.table,form = layui.form;$=layui.jquery;


        //加载表格
        table.render({
            elem:'#footprintTable',
            height:'full-160',
            toolbar:'#tableBar',
            url:"/footprint/ft/find",
            page: {
                theme:'#1e9fff'
            },
            cols:[
                [
                    {field:'id',title:'足迹id',align:'center'},
                    {field:'userId',title:'用户id',align:'center'},
                    {field:'pid',title:'商品id',align:'center'},
                    {field:'addTime',title:'添加时间',align:'center'},
                ]
            ],
        })
        //监听搜索按钮
        form.on('submit(searchBtn)',function(data){
            var dataForm = data.field;

            table.reload('footprintTable',{
                where:{
                    userId:dataForm.userId,
                    pId:dataForm.pId
                }
            })
        })

    });

</script>
</body>
</html>